
import { Modal} from 'antd';
import React, { useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { VersionTableListItem} from './data';
import versionList from '../../funcs/versionlist';
import versionDown from '../../funcs/downfile';
import versionRemove from '../../funcs/removefile';


export interface VersionProps {
  onCancel: (flag?: boolean) => void;
  versionModalVisible: boolean;
  product_number:string;
  file_name:string;
}


const VersionForm: React.FC<VersionProps> = (props) => {
  const actionRef = useRef<ActionType>();
  const product_number = props.product_number;
  const file_name = props.file_name;
  const DownloadFile = (content:any, file_name:any)=>{
    let url = URL.createObjectURL(new Blob([content], { type: "octet/stream" }));
    let a = document.createElement("a"); 
    a.href = url;
    a.download = file_name;
    a.click();
    URL.revokeObjectURL(url);
  }
  const columns: ProColumns<any>[] = [
    {
      title: "文件名称",
      dataIndex: 'file_name',
      valueType: 'textarea',
    },
    {
      title: "版本名称",
      dataIndex: 'version',
      valueType: 'textarea',
    },
    {
      title: "文件路径",
      dataIndex: 'file_path',
      valueType: 'textarea',
      hideInTable:true,

    },
    {
      title: "操作",
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={async() => {
              const content = await versionDown({file_path:record.file_path, version:record.version});
              const file_name = [record.version, record.file_name].join("");
              console.log(record.file_path);
              DownloadFile(content, file_name);
              await versionRemove({file_path:record.file_path});
            }}
          >
          下载
          </a>
        </>
      ),
    },
  ];
  return (
    <Modal
      width={1040}
      bodyStyle={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title={"版本详情"}
      visible={props.versionModalVisible}
      onCancel={() => props.onCancel()}
    >
    <PageContainer>
      <ProTable<VersionTableListItem>
        headerTitle={"版本详情"}
        actionRef={actionRef}
        rowKey="key"
        search={false}
        request={(params, sorter, filter) => versionList({ ...params, sorter, filter, product_number, file_name })}
        columns={columns}
      />
    </PageContainer>
    </Modal>
  )
}

export default VersionForm